<template>
  <router-view />
  <!-- 底部导航 -->
  <div class="bottomnav">
    <van-tabbar v-model="active" :placeholder="true" active-color="black">
      <van-tabbar-item to="/home/index">
        <span>回顶部</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/home/teach">
        <span>樊登讲书</span>
        <template #icon="props">
          <img :src="props.active ? icon.active1 : icon.inactive1" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/home/find">
        <span>发现</span>
        <template #icon="props">
          <img :src="props.active ? icon.active2 : icon.inactive2" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/home/mine">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.active3 : icon.inactive3" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const active = ref(0);
    return {
      active,
      icon: {
        active: require("../../public/img/回顶部.png"),
        inactive: "https://img01.yzcdn.cn/vant/user-inactive.png",

        active1: require("../../public/img/images/imgs03.jpg"),
        inactive1: require("../../public/img/樊登讲书.png"),

        active2: require("../../public/img/images/imgs06.jpg"),
        inactive2: require("../../public/img/发现.png"),

        active3: require("../../public/img/images/imgs09.jpg"),
        inactive3: require("../../public/img/我的.png"),
      },
    };
  },
};
</script>

<style lang="less" scoped>
.bottomnav {
  position: relative;
  z-index: 1000;
}
</style>
